@import "../config/config";

/**
 *  margin padding
 *  @each 循环多次保证优先级
 */

.m-auto, .auto {
  margin-left: auto;
  margin-right: auto;
}

@each $size in $box-sizes {
  .m-#{$size}, .margin-#{$size} {
    margin: #{$size}px;
  }
  @if $size >= 0 {
    .p-#{$size}, .padding-#{$size} {
      padding: #{$size}px;
    }
  }
}

@each $size in $box-sizes {
  .m-h-#{$size} {
    margin-left: #{$size}px;
    margin-right: #{$size}px;
  }
  .m-v-#{$size} {
    margin-top: #{$size}px;
    margin-bottom: #{$size}px;
  }
  @if $size >= 0 {
    .p-h-#{$size} {
      padding-left: #{$size}px;
      padding-right: #{$size}px;
    }
    .p-v-#{$size} {
      padding-top: #{$size}px;
      padding-bottom: #{$size}px;
    }
  }
}

@each $size in $box-sizes {
  @each $side in top right bottom left {
    .m-#{str-slice($side, 0, 1)}-#{$size} {
      margin-#{$side}: #{$size}px;
    }
    @if $size >= 0 {
      .p-#{str-slice($side, 0, 1)}-#{$size} {
        padding-#{$side}: #{$size}px;
      }
    }
  }
}

$sp-size: 0;
@while $sp-size<=30 {
  .m-#{$sp-size} {
    margin: 1px * $sp-size !important;
  }
  .m-t-#{$sp-size} {
    margin-top: 1px * $sp-size !important;
  }
  .m-b-#{$sp-size} {
    margin-bottom: 1px * $sp-size !important;
  }
  .m-l-#{$sp-size} {
    margin-left: 1px * $sp-size !important;
  }
  .m-r-#{$sp-size} {
    margin-right: 1px * $sp-size !important;
  }
  .p-#{$sp-size} {
    padding: 1px * $sp-size !important;
  }
  .p-t-#{$sp-size} {
    padding-top: 1px * $sp-size !important;
  }
  .p-b-#{$sp-size} {
    padding-bottom: 1px * $sp-size !important;
  }
  .p-l-#{$sp-size} {
    padding-left: 1px * $sp-size !important;
  }
  .p-r-#{$sp-size} {
    padding-right: 1px * $sp-size !important;
  }
  $sp-size: $sp-size + 5;
}
